<template>
  <div>
     <div class="tabBar">
       <tabBar v-for="(item, i) in tabBarList" :key="i" :path="item.path">
          <!--具名插槽 -->
          <template slot="tabBar_con">
            <span :class="`iconfont ${item.icon}`"></span>
            <div class="txt">{{ item.text }}</div>
          </template>
      </tabBar>
    </div>
  </div>
</template>

<script>
import tabBar from "@/components/tabBar";
export default {
    name:'tabBarView',
    components:{tabBar,},
    data() {
        return {
            tabBarList: [
                {
                    icon: "icon-shouye",
                    text: "首页",
                    path:'/home',//路径 用于高亮显示
                },
                {
                    icon: "icon-fenlei",
                    text: "分类",
                    path:'/list'
                },
                {
                    icon: "icon-linggan",
                    text: "灵感",
                    path:'/ins'
                },
                {
                    icon: "icon-yuedu",
                    text: "文章",
                    path:'/art'
                },
                {
                    icon: "icon-wode",
                    text: "个人",
                    path:'/my'
                },
            ],
        }
    },
}
</script>

<style scoped>
.tabBar {
    height: 1rem;
    width: 100%;
    z-index: 999;
    max-width: 970px;
    background: white;
    position: fixed;
    bottom: 0px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-top: 1px solid #eee;
}
</style>